<template>
  <section class="v-graphic" :style="{'background-color': bgcolor, 'margin-top': top, 'margin-left': margins, 'margin-right': margins}" :class="{'radius': radius == 1}">
    <template v-if="list && list.length > 0">
      <section class="v-graphic-list">
        <section v-for="(item, index) in list" :key="index" class="v-graphic-list-item" :style="{ width: 'calc(100% / ' + layout + ')' }">
          <div class="v-graphic-list-item-icon">
            <van-image :src="item.icon" />
          </div>
          <div class="v-graphic-list-item-label" :style="{'color': textcolor}">{{ item.label }}</div>
        </section>
      </section>
    </template>
    <template v-else>
      <van-skeleton title :row="3" />
    </template>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VGraphic',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {}
  },
  computed: {
    layout () {
      return this.option.layout || 3
    },
    bgcolor () {
      console.log('背景',this.option)
      return this.option.bgcolor || '#fff'
    },
    textcolor () {
      console.log('文字',this.option)
      return this.option.textcolor || '#333'
    },
    radius () {
      return this.option.radius || 1
    },
    list () {
      return this.option.list || []
    }
  },
  created () {

  },
  methods: {}
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
@import '@/styles/utility/center.scss';

.v-graphic {
  padding: rem(18) 0;
  &.radius {
    border-radius: rem(32);
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
    &-item {
      text-align: center;
      box-sizing: border-box;
      padding: rem(20) rem(20);
      &-icon {
        width: rem(90);
        height: rem(90);
        margin: 0 auto;
        margin-bottom: rem(18);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: rem(26);
        font-weight: 500;
      }
    }
  }
}
</style>
